<template>
  <CPageLayout
    :headerConfig="headerConfig"
    bodyWrapperStyle="height: calc(100vh - 50px - 56px); padding: 16px;"
    bodyStyle="background: transparent"
    v-loading="loading"
  >
    <template #headerRightBtn>
      <div class="change-switch g-flex-start-center">
        <span class="g-mr8 change-switch-text">仅展示不同</span>
        <el-switch v-model="isOnlyShowDiff" />
      </div>
    </template>
    <div v-if="leftModelNo">
      <CardHead :leftModel="leftModel" :rightModel="rightModel" @select="handleSelectModel" />
      <CardList
        :stage-comparison-info="stageComparisonInfo"
        :leftModel="leftModel"
        :rightModel="rightModel"
        :isOnlyShowDiff="isOnlyShowDiff"
      />
    </div>
    <div class="comparison-empty g-flex-center-center--column" v-else>
      <img class="comparison-empty-img" src="@/assets/images/empty-img.png" alt="" />
      <span class="comparison-empty-text g-mt9">暂无已核算模型</span>
    </div>
    <ModelSelectDialog
      v-model:visible="modelSelectDialogVisible"
      @select="handleSelectedModel"
      title="选择模型"
    ></ModelSelectDialog>
  </CPageLayout>
</template>

<script lang="ts" setup name="">
import { nextTick, onMounted, ref } from 'vue';
import { CPageLayout, CPageHeaderComplexProps } from '@/components/CPageLayout';
import ModelSelectDialog from '@/businessComponents/ModelSelectDialog/index.vue';
import CardHead from './components/CardHead/index.vue';
import CardList from './components/CardList/index.vue';
import type { ModelPositionType } from './types';
import type {
  GetVisibleModelDetailResult,
  GetComparisonListResult
} from '@/apis/pcf/pcfForm/model/pcfFormModel';
import { getComparisonList, getLastVisibleModel } from '@/apis/pcf/pcfForm/pcfForm';

/**
 * header配置
 */
const headerConfig: CPageHeaderComplexProps = {
  title: '碳排放对比分析',
  desc: '对比的基准模型为最近完成核算的模型',
  descPlacement: 'inline',
  size: 'small'
};

/**
 * 仅展示不同
 */
const isOnlyShowDiff = ref(false);
const modelSelectDialogVisible = ref(false);
const modelPosition = ref<ModelPositionType>('LEFT');
const leftModelNo = ref<string>('');
const leftModel = ref<GetVisibleModelDetailResult | null>();
const rightModelNo = ref<string>();
const rightModel = ref<GetVisibleModelDetailResult | null>();
const stageComparisonInfo = ref<GetComparisonListResult['stageComparisonInfo']>();
function handleSelectModel(position: ModelPositionType) {
  modelPosition.value = position;
  modelSelectDialogVisible.value = true;
}
function handleSelectedModel(modelDetail: any) {
  if (modelPosition.value === 'LEFT') {
    leftModelNo.value = modelDetail.modelNo;
  } else {
    rightModelNo.value = modelDetail.modelNo;
  }
  modelSelectDialogVisible.value = false;
  getData();
}

const loading = ref(false);
async function getData(init = false) {
  try {
    loading.value = true;
    let modelNo = '';
    if (init) {
      modelNo = await getLastVisibleModel();
      leftModelNo.value = modelNo;
    }
    if (leftModelNo.value) {
      const res = await getComparisonList(leftModelNo.value, rightModelNo.value);
      console.log('getComparisonList res', res);
      leftModel.value = res.modelInfoLeft;
      rightModel.value = res.modelInfoRight;
      stageComparisonInfo.value = res.stageComparisonInfo;
    } else {
      leftModel.value = null;
      rightModel.value = null;
    }
  } catch (error) {
    console.log('error', error);
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  getData(true);
});
</script>

<style lang="scss" scoped>
.change-switch {
  .change-switch-text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #435970;
    line-height: 22px;
  }
}
.comparison-empty {
  width: 100%;
  height: calc(100vh - 106px - 32px);
  background-color: #fff;
  border-radius: 6px;
  .comparison-empty-img {
    width: 180px;
    height: 110px;
  }
  .comparison-empty-text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7a8a99;
    line-height: 22px;
  }
}
</style>
